<template>
  <!--主内容区-->
  <div class="layout">
    <h1 class="h1">
      {{ selectModel != "" ? selectModel : "欢迎使用聊天机器人☺️" }}
    </h1>
    <div class="content">
      <!-- {{ selectModel }} -->
      <ProviderSelect v-model="selectModel" :items="providers" />
      <!-- {{ inputValue }} -->
      <!-- TODO:测试按钮一会删除 -->
      <div class="my-5">
        <div class="mb-4">
          <el-button>Default</el-button>
          <el-button type="primary">Primary</el-button>
          <el-button type="success">Success</el-button>
          <el-button type="info">Info</el-button>
          <el-button type="warning">Warning</el-button>
          <el-button type="danger">Danger</el-button>
        </div>
        <div class="mb-4">
          <el-button plain>Plain</el-button>
          <el-button plain type="primary">Primary</el-button>
          <el-button plain type="success">Success</el-button>
          <el-button plain type="info">Info</el-button>
          <el-button plain type="warning">Warning</el-button>
          <el-button plain type="danger">Danger</el-button>
        </div>
        <div class="mb-4">
          <el-button round>Round</el-button>
          <el-button round type="primary">Primary</el-button>
          <el-button round type="success">Success</el-button>
          <el-button round type="info">Info</el-button>
          <el-button round type="warning">Warning</el-button>
          <el-button round type="danger">Danger</el-button>
        </div>
        <div>
          <el-button :icon="Search" circle />
          <el-button :icon="Edit" circle type="primary" />
          <el-button :icon="Check" circle type="success" />
          <el-button :icon="Message" circle type="info" />
          <el-button :icon="Star" circle type="warning" />
          <el-button :icon="Delete" circle type="danger" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ProviderProps } from "@/type";
import ProviderSelect from "@/components/ProviderSelect.vue";
import { ProviderSelectMockData } from "@/dataMock";

const selectModel = ref("");
const providers: ProviderProps[] = ProviderSelectMockData;
</script>

<style lang="scss" scoped>
.layout {
  height: calc(100vh - 20px);
  @apply flex flex-col items-center justify-center;
}

.h1 {
  @apply text-4xl font-bold mb-5;
  color: $SH-COLOR;
}

.content {
  @apply w-[80%] flex flex-col items-center;
}
</style>
